<template>
  <div class="home">
    <div class="home-header">
      <h2 class="home-title">Lina，欢迎您！</h2>
      <p class="home-desc">全局运营数据更新截止于：2019-05-20</p>
    </div>
    <a-card :bordered="false">
      <a-card-grid v-for="i in 7" :key="i" class="home-view__item">
        <a-skeleton :paragraph="{ rows: 1 }" />
      </a-card-grid>
    </a-card>
    <ui-sub-card title="图片路径指南">
      <template>
        <a-card :bordered="false" class="temp-img">
          <a-card-grid>
            <h4>相对路径：（会通过编译器处理）</h4>
            <img alt="Vue logo" src="../../../assets/images/logo.png" />
          </a-card-grid>
          <a-card-grid>
            <h4>别名：（会通过编译器处理，小图转base64，大图放置到assets）</h4>
            <img src="~@/assets/images/contact.png" />
            <img src="~@/assets/images/solution_bg.jpg" />
          </a-card-grid>
          <a-card-grid>
            <h4>static资源路径：（不经过编译器）</h4>
            <img :src="`${publicPath}static/contact_message.png`" />
          </a-card-grid>
        </a-card>
      </template>
    </ui-sub-card>
    <ui-sub-card>
      <template #header>
        <strong>项目指标完成情况</strong>
        <span>更新截止于：2019/04/10</span>
      </template>
      <template>
        <a-row :gutter="16">
          <a-col :span="14">
            <a-card :bordered="false" title="年度指标">
              <a-skeleton :paragraph="{ rows: 5 }" />
            </a-card>
          </a-col>
          <a-col :span="10">
            <a-card :bordered="false" title="月度指标">
              <a-skeleton :paragraph="{ rows: 5 }" />
            </a-card>
          </a-col>
        </a-row>
      </template>
    </ui-sub-card>
    <ui-sub-card title="访问趋势">
      <template>
        <a-card :bordered="false" title="今日趋势">
          <a-skeleton :paragraph="{ rows: 5 }" />
        </a-card>
      </template>
    </ui-sub-card>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  config: {
    pageName: false
  },
  components: {},
  data() {
    return {
      publicPath: process.env.VUE_APP_ROUTER_BASE
    }
  }
}
</script>
<style lang="scss" scoped src="../styles/home.scss"></style>
<style lang="scss" scoped>
.temp-img {
  .ant-card-grid {
    $color: #e8e8e8;
    height: 160px;
    box-shadow: 1px 0 0 0 $color, 0 1px 0 0 $color, 1px 1px 0 0 $color,
      inset 1px 0 0 0 $color, inset 0 1px 0 0 $color;

    &:first-child {
      border-radius: 4px 0 0 4px;
    }

    &:last-child {
      border-radius: 0 4px 4px 0;
    }
  }
  img {
    max-height: 64px;
    margin-right: 24px;
  }
}
</style>
